<div id="dashboardGeneralPage" data-role="page" class="page type-interior dashboardHomePage" data-title="${General}">
    <div>
        <div class="content-primary">
            <form class="dashboardGeneralForm">
                <div class="verticalSection">
                    <div class="sectionTitleContainer flex align-items-center">
                        <h2 class="sectionTitle">${Settings}</h2>
                        <a is="emby-linkbutton" rel="noopener noreferrer" class="raised button-alt headerHelpButton" target="_blank" href="https://jellyfin.org/docs/general/server/settings">${Help}</a>
                    </div>
                </div>

                <div class="verticalSection">
                    <div class="inputContainer">
                        <input is="emby-input" type="text" id="txtServerName" label="${LabelServerName}" />
                        <div class="fieldDescription">${LabelServerNameHelp}</div>
                    </div>
                    <div class="selectContainer">
                        <select is="emby-select" id="selectLocalizationLanguage" label="${LabelPreferredDisplayLanguage}"></select>
                        <div class="fieldDescription">
                            <div>${LabelDisplayLanguageHelp}</div>
                            <div style="margin-top: .25em;">
                                <a is="emby-linkbutton" rel="noopener noreferrer" class="button-link" href="https://jellyfin.org/docs/general/contributing/#translating" target="_blank">${LearnHowYouCanContribute}</a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="verticalSection verticalSection-extrabottompadding">
                    <h2>${HeaderPaths}</h2>
                    <div class="inputContainer">
                        <div style="display: flex; align-items: center;">
                            <div style="flex-grow:1;">
                                <input is="emby-input" id="txtCachePath" label="${LabelCachePath}" autocomplete="off" dir="ltr" />
                            </div>
                            <button type="button" is="paper-icon-button-light" id="btnSelectCachePath" title="${ButtonSelectDirectory}" class="emby-input-iconbutton"><span class="material-icons search" aria-hidden="true"></span></button>
                        </div>
                        <div class="fieldDescription">${LabelCachePathHelp}</div>
                    </div>

                    <div class="inputContainer">
                        <div style="display: flex; align-items: center;">
                            <div style="flex-grow:1;">
                                <input is="emby-input" id="txtMetadataPath" label="${LabelMetadataPath}" autocomplete="off" dir="ltr" />
                            </div>
                            <button type="button" is="paper-icon-button-light" id="btnSelectMetadataPath" title="${ButtonSelectDirectory}" class="emby-input-iconbutton"><span class="material-icons search" aria-hidden="true"></span></button>
                        </div>
                        <div class="fieldDescription">${LabelMetadataPathHelp}</div>
                        <input type="hidden" id="txtMetadataNetworkPath" />
                    </div>
                </div>

                <div class="verticalSection">
                    <div class="sectionTitleContainer flex align-items-center">
                        <h2 class="sectionTitle">${QuickConnect}</h2>
                    </div>
                </div>

                <div class="checkboxList paperList" style="padding:.5em 1em;">
                    <label>
                        <input type="checkbox" is="emby-checkbox" id="chkQuickConnectAvailable" />
                        <span>${EnableQuickConnect}</span>
                    </label>
                </div>

                <div class="verticalSection">
                    <h2>${HeaderBranding}</h2>
                    <div class="inputContainer">
                        <textarea is="emby-textarea" id="txtLoginDisclaimer" label="${LabelLoginDisclaimer}" class="textarea-mono"></textarea>
                        <div class="fieldDescription">${LabelLoginDisclaimerHelp}</div>
                    </div>
                    <div class="inputContainer customCssContainer">
                        <textarea is="emby-textarea" id="txtCustomCss" label="${LabelCustomCss}" class="textarea-mono"></textarea>
                        <div class="fieldDescription">${LabelCustomCssHelp}</div>
                    </div>
                    <div class="checkboxList paperList" style="padding:.5em 1em;">
                        <label>
                            <input type="checkbox" is="emby-checkbox" id="chkSplashScreenAvailable" />
                            <span>${EnableSplashScreen}</span>
                        </label>
                    </div>
                </div>

                <div class="verticalSection">
                    <h2>${HeaderPerformance}</h2>
                    <div class="inputContainer">
                        <input is="emby-input" id="txtLibraryScanFanoutConcurrency" label="${LibraryScanFanoutConcurrency}" placeholder="0" type="number" pattern="[0-9]*" min="0" step="1" />
                        <div class="fieldDescription">${LibraryScanFanoutConcurrencyHelp}</div>
                    </div>
                    <div class="inputContainer">
                        <input is="emby-input" id="txtParallelImageEncodingLimit" label="${LabelParallelImageEncodingLimit}" placeholder="0" type="number" pattern="[0-9]*" min="0" step="1" />
                        <div class="fieldDescription">${LabelParallelImageEncodingLimitHelp}</div>
                    </div>
                </div>
                <br />
                <div>
                    <button is="emby-button" type="submit" class="raised button-submit block">
                        <span>${Save}</span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
